<template>
  <a-row :gutter="14">
    <template v-for="item in growCardList" :key="item.title">
      <a-col :span="8">
        <Card size="small" class="w-full !mb-14px">
          <img :src="item.image" width="300" />
          <p class="card-name">{{ item.name }}</p>
          <p class="card-content">{{ item.content }}</p>
          <a-button type="primary" @click="item.func">{{ item.btnName }}</a-button>
        </Card>
      </a-col>
    </template>
  </a-row>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';

  defineProps({
    growCardList: {
      type: [Array] as PropType<any[]>,
      required: true, //表格配置json
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card:last-child) {
    margin-right: 0 !important;
  }

  :deep(.ant-card-body) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;

    .card-name {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .card-content {
      color: #999;
      margin-bottom: 20px;
    }
  }

  :deep(.ant-btn) {
    width: 150px;
    height: 45px;
    background: #5e95ff;
    box-shadow: 0 4px 18px 0 rgb(94 149 255 / 50%);
    border-radius: 0 30px 30px;
    border-color: transparent;
  }
</style>
